<template>
  <view class="header-section">
    <view class="cu-avatar"> {{ avatarName }} </view>
    <!-- <view v-if="!avatar" class="cu-avatar"> </view>
    <image
      class="cu-avatar"
      v-if="avatar"
      :src="avatar"
      mode="aspectFill"
    ></image> -->
    <view class="userInfo" v-if="userIsLogin" @tap="gotoPersonalSet">
      <view class="userInfo-row">
        <view class="userInfo-row-name">{{ name }}</view>
        <!-- <image
          class="userInfo-row-arrow"
          src="/static/images/mine/personSet_arrow.png"
        ></image> -->
      </view>
      <view class="userInfo-roleInfo">
        {{ departmentInfo }}
      </view>
    </view>
    <view v-else class="userInfoLogin" @tap="handleToLogin"> 点击登录 </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { getUserInfo } from "@/utils/storageUtil";
import * as KKLoginApi from "@/api/login";

const userIsLogin = computed(() => {
  return true;
});

const name = computed(() => {
  return getUserInfo().trueName;
});

const avatarName = computed(() => {
  return shortName(getUserInfo().trueName);
});

const departmentInfo = computed(() => {
  return getUserInfo().departmentFullName || "";
  // const departmentList = getUserInfo().departmentList;
  // if (departmentList && departmentList.length > 0) {
  //   const nameList = departmentList.map((item: any) => item.departmentName);
  //   return nameList.join("-");
  // }
  // return getUserInfo().departmentFullName || "";
});

const shortName = (name: string) => {
  if (name && name.length > 2) {
    return name.substring(name.length - 2, name.length);
  } else {
    return name || "";
  }
};

const gotoPersonalSet = () => {
  uni.navigateTo({
    url: "",
  });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.header-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-left: 40rpx;
  padding-right: 40rpx;
  .cu-avatar {
    width: 120rpx;
    height: 120rpx;
    background-color: #126efe;
    border-radius: 60rpx;
    font-weight: 400;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 120rpx;
    text-align: center;
  }

  .userInfoLogin {
    font-size: 36rpx;
    margin-left: 20rpx;
    line-height: 120rpx;
    color: #000000;
  }

  .userInfo {
    display: flex;
    flex-direction: column;
    padding-left: 12rpx;
    padding-right: 24rpx;
    justify-content: center;
    width: calc(100vw - 224rpx);
    &-row {
      margin-top: 10rpx;
      display: flex;
      flex-direction: row;
      align-content: center;
      align-items: center;

      &-name {
        padding-left: 18rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #111111;
        line-height: 44rpx;
      }
      &-arrow {
        margin-left: 24rpx;
        width: 24rpx;
        height: 27rpx;
      }
    }

    &-roleInfo {
      padding-top: 23rpx;
      padding-left: 24rpx;
      font-size: 22rpx;
      color: #999999;
      line-height: 28rpx;
    }

    &-phone {
      padding-top: 16rpx;
      height: 34rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.8);
      line-height: 28rpx;
    }
  }
}
</style>
